<template>
	<div class="box" ref="echartDom"></div>
</template>

<script setup lang="ts">
import { inject, ref, reactive, shallowRef, onMounted, onUnmounted, watchEffect,defineEmits } from "vue";
import { pxToRem } from "@/utils/index";

// 接收参数
const props = defineProps({
	housingSupplyStatsData: {
			type: Object,
			default: () => {},
	},
});
// 数据定义
const chartsData = reactive<any>({
	legendData: [],
	xAxisData: [],
	yAxisData: [],
	seriesData: [],
});
const echartDom = ref<null | HTMLDivElement>(null);
const myChart = shallowRef<null | any>(null);
const echarts = inject<any>("echarts");
const emit = defineEmits(['dialogData'])
// echarts初始化渲染
chartsData.legendData = props.housingSupplyStatsData.legendData;
chartsData.xAxisData = props.housingSupplyStatsData.xAxisData;
chartsData.yAxisData = props.housingSupplyStatsData.yAxisData;
chartsData.seriesData = props.housingSupplyStatsData.seriesData;
const colors = props.housingSupplyStatsData.colors;
const typeData = props.housingSupplyStatsData.typeData;
const legendSty = props.housingSupplyStatsData.legendStyle;
const gridSty = props.housingSupplyStatsData.gridConfig;

const getEchart = () => {
	if (echartDom.value) {
			myChart.value = echarts.init(echartDom.value);
			// 提示框文字样式
			const tooltipTextStyle = {
					color: "#fff",
					fontSize: pxToRem(14),
			};

			// 提示框背景
			const tooltipBackgroundColor = "rgba(8, 64, 132, 0.9)";

			// 图例配置
			const legendStyle = {
					show: legendSty.show,
					left: legendSty.right ? "auto" : pxToRem(legendSty.left),
					right: pxToRem(legendSty.right),
					top: pxToRem(legendSty.top),
					itemWidth: pxToRem(legendSty.itemWidth),
					itemHeight: pxToRem(legendSty.itemHeight),
					itemGap: pxToRem(legendSty.itemGap),
					textStyle: {
							color: "#fff",
							fontSize: pxToRem(12),
							rich: {},
							padding: [0, 0, pxToRem(-3), 0],
					},
					data: chartsData.legendData,
			};

			// 网格区域
			const gridConfig = {
					left: gridSty.left,
					right: gridSty.right,
					bottom: gridSty.bottom,
					top: gridSty.top,
					containLabel: true,
			};

			// x轴配置
			const xAxisConfig = {
				type: 'value',
      splitLine: {
         lineStyle: {
            color: 'rgba(77, 128, 254, 0.2)',
            type: 'line',
         },
      },
      axisTick: {
         show: true,
      },

      axisLabel: {
         //  改变x轴字体颜色和大小
         show: true,
									axisLabel: {
        formatter: "{value}",
        color: "#959699",
        fontSize: pxToRem(12),
      },
      },
			};

			// y轴配置
			const yAxisConfig = {
				type: 'category',
				inverse: true,
				axisLabel: {
							show: true,
							textStyle: {
          color: "#FFFFFF",
          fontSize: pxToRem(12),
        },
				},
				splitLine: {
							show: false,
				},
				axisTick: {
							show: false,
				},
				axisLine: {
							show: false,
				},
				data: chartsData.xAxisData,
			}

			// 数据项配置
			const seriesConfig = chartsData.seriesData.map((data: any, index: string | number) => ({
					name: chartsData.legendData[index],
					type: typeData[index].name,
					zlevel: 1,
					data: data,
					barWidth: pxToRem(10),
					label: {
												show: false,
												position: 'right', // 位置
												color: '#00c0fa',
												fontSize: 14,
												distance: 10 // 距离
												// formatter: '{c}%' // 这里是数据展示的时候显示的数据
									}, // 柱子上方的数值
						itemStyle: {
									normal: {
												barBorderRadius: 0,
												color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
															{
																		offset: 0,
																		color: colors[index].a,
															},
															{
																		offset: 1,
																		color: colors[index].b,
															},
												]),
									},
						},
			}));
			// 渲染图表数据
			const option = {
					tooltip: {
							trigger: "axis",
								position: function (point, params, dom, rect, size) { // 解决tooltip在最右侧时部分被遮挡
									let obj = {};
									if (point[0] > size.viewSize[0] / 2) { // 鼠标位置位于echarts容器的一半位置右侧时，提示框显示在左侧
											obj['left'] = point[0] - size.contentSize[0] - 20;
									} else {
											obj['right'] = size.viewSize[0] - size.contentSize[0] * 2;
									}
									if (point[1] > size.viewSize[1] / 2) { // 鼠标位置位于echarts容器的一半位置下侧时，提示框显示在上侧
											obj['top'] = point[1] - size.contentSize[1] - 20;
									} else {
											obj['bottom'] = size.viewSize[1] - size.contentSize[1] * 2;
									}
									return obj;
							},
		
							axisPointer: {
									type: "line",
							},
							textStyle: tooltipTextStyle,
							backgroundColor: tooltipBackgroundColor,
					},
					legend: legendStyle,
					grid: gridConfig,
					xAxis: xAxisConfig,
					yAxis: yAxisConfig,
					series: seriesConfig,
			};
			myChart.value.setOption(option);
			myChart.value.getZr().on("click", (params) => {
      emit('dialogData',option)
    });
	}
};
const updateChart = () => {
	if (myChart.value) {
			myChart.value.dispose(); // 销毁旧图表实例
	}
	chartsData.legendData = props.housingSupplyStatsData.legendData;
	chartsData.xAxisData = props.housingSupplyStatsData.xAxisData;
	chartsData.yAxisData = props.housingSupplyStatsData.yAxisData;
	chartsData.seriesData = props.housingSupplyStatsData.seriesData;
	getEchart();
};

watchEffect(() => {
	updateChart();
});

onMounted(() => {
	getEchart();
	window.addEventListener("resize", updateChart);
});

onUnmounted(() => {
	window.removeEventListener("resize", updateChart);
});
</script>
